<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
	  			xmlns:s="http://jboss.com/products/seam/taglib"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:a="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich">

	<a4j:region id="tab1">	
		<h:form>
			<a:commandButton id="findSlips" value="View all the slips" action="#{userSlips.findBettingSlips}" reRender="searchResults"/>
			&#160;
			<a:status>
				<f:facet name="start">
					<h:graphicImage value="/img/spinner.gif"/>
				</f:facet>
			</a:status>
		</h:form>
		<rich:spacer height="30" />
		<a:form>
			<a:outputPanel id="searchResults">
				<rich:spacer height="30" rendered="#{slips != null and slips.rowCount==0}"/>
				<h:outputText value="No betting slips found" class="entry errors" 
					rendered="#{slips != null and slips.rowCount==0}"/>							
				<rich:spacer height="30" />
				<rich:dataTable id="slips" value="#{slips}" rows="#{userSlips.pageSize}" 
					var="slip" rendered="#{slips.rowCount>0}"
					onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
					onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
					<rich:column>
						<f:facet name="header">ID</f:facet>
						#{slip.id}
					</rich:column>
					<rich:column>
						<f:facet name="header">Date</f:facet>
						#{slip.creationDate}
					</rich:column>
					<rich:column>
						<f:facet name="header">Number of bets</f:facet>
						#{betDAO.getDAO().getEntitiesCount(slip)}
					</rich:column>												
					<rich:column>
						<f:facet name="header">Money</f:facet>
						#{slip.money}
					</rich:column>						
					<rich:column>
						<f:facet name="header">Details</f:facet>
						<a:commandLink value="Show details" action="#{betsFromSlip.selectBettingSlip(slip)}" 
						   linkStyle="button" reRender="slipDetailsResult" />
					</rich:column>
					<f:facet name="footer">
						<rich:datascroller align="center" maxPages="#{userSlips.numberOfPages}"
							rendered="#{slips.rowCount>0}">
							<f:facet name="next">
								<a:commandLink value=">" action="#{userSlips.next}" 
								style="data_table_pages"
								reRender="searchResults"/>
							</f:facet>
							<f:facet name="next_disabled">
								<a:commandLink value=">" action="#{userSlips.next}" 
								style="data_table_pages"
								reRender="searchResults"/>
							</f:facet>
							<f:facet name="previous">
								<a:commandLink value="&#60;" style="data_table_pages" 
									action="#{userSlips.previous}"
									reRender="searchResults"/>
							</f:facet>
							<f:facet name="previous_disabled">
								<a:commandLink value="&#60;" style="data_table_pages" 
								action="#{userSlips.previous}"
								reRender="searchResults"/>										
							</f:facet>
							<f:facet name="pages">
								<h:outputText value="#{userSlips.currentPage} / #{userSlips.numberOfPages}"></h:outputText>
							</f:facet>									
							<f:facet name="first_disabled">
								<a:commandLink value="&#60;&#60;" style="data_table_pages" 
									action="#{userSlips.first}"
									reRender="searchResults"/>
							</f:facet>
							<f:facet name="last_disabled" rendered="false">
								<a:commandLink value=">>" action="#{userSlips.last}" 
								style="data_table_pages"
								reRender="searchResults"/>
							</f:facet>
							<f:facet name="fastforward_disabled" rendered="false">
								<a:commandLink value=">>>" action="#{userSlips.next}" 
								style="data_table_pages"
								reRender="searchResults"/>
							</f:facet>
							<f:facet name="fastrewind_disabled" rendered="false">
								<a:commandLink value="&#60;&#60;&#60;" style="data_table_pages" 
									action="#{userSlips.previous}"
									reRender="searchResults"/>
							</f:facet>									
						</rich:datascroller>
					</f:facet>
				</rich:dataTable>
			</a:outputPanel>					
			<br />					
			<a:outputPanel id="slipDetailsResult">						
				<rich:panel rendered="#{betsOpaque.rowCount>0}">
					<f:facet name="header">
						<h:outputText value="Bets on the slip"></h:outputText>
					</f:facet>
					<h:form>
					<rich:dataGrid value="#{betsOpaque}" var="betOp" columns="3" elements="#{betsOpaque.size()}">
						<rich:panel>
							<f:facet name="header">
								<h:outputText value="Bet id: #{betOp.bet.id}"></h:outputText>
							</f:facet>
							<h:panelGrid columns="2">									
								<h:outputText value="Your choice:" styleClass="label"></h:outputText>
								<h:outputText value="#{betOp.bet.winner.name}" />
								<h:outputText value="Group:" styleClass="label"></h:outputText>
								<h:outputText value="#{betOp.eventName}" />
								<h:outputText value="Open:" styleClass="label"></h:outputText>
								<h:outputText value="yes" styleClass="green" rendered="#{betOp.bet.isClosed() == true}"/>
								<h:outputText value="no" styleClass="red" rendered="#{betOp.bet.isClosed() == false}"/>
								<h:outputText value="Correct:" styleClass="label"></h:outputText>
								<h:outputText value="no" styleClass="red" rendered="#{betOp.bet.isWinning() == false}"/>
								<h:outputText value="yes" styleClass="green" rendered="#{betOp.bet.isWinning() == true}"/>
								<h:outputText value="Participants:" styleClass="label"></h:outputText>
								<rich:dataTable value="#{betOp.getParticipants()}" var="par" 
								  rendered="#{betOp.getParticipants().size()>0}" 
								  onRowMouseOver="this.style.backgroundColor='#F1F1F1'" 
								  onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
									<rich:column>
										#{par.name}
									</rich:column>
								</rich:dataTable>									
							</h:panelGrid>
						</rich:panel>
					</rich:dataGrid>
					</h:form>
				</rich:panel>
			</a:outputPanel>
		</a:form>
	</a4j:region>				
				
</ui:composition>